<template>
  <div class="game-container">
    <div class="game-header">
      <div class="score">得分: {{ score }}</div>
      <div class="time">剩余时间: {{ timeLeft }}秒</div>
    </div>
    <div class="game-board">
      <div 
        v-for="(hole, index) in holes" 
        :key="index"
        class="hole"
        @click="whack(index)"
      >
        <div 
          class="mole"
          :class="{ 'up': hole.isUp }"
        >
          <img src="/images/mole.png" alt="地鼠" class="mole-img" />
        </div>
      </div>
    </div>
    <button 
      class="start-button"
      @click="startGame"
      :disabled="isPlaying"
    >
      {{ isPlaying ? '游戏进行中' : '开始游戏' }}
    </button>
    
    <!-- 音频元素 -->
    <audio ref="hitSound" src="/sounds/hit.mp3" preload="auto"></audio>
    <audio ref="startSound" src="/sounds/start.mp3" preload="auto"></audio>
    <audio ref="endSound" src="/sounds/end.mp3" preload="auto"></audio>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const holes = ref(Array(9).fill().map(() => ({ isUp: false })))
const score = ref(0)
const timeLeft = ref(30)
const isPlaying = ref(false)
let gameInterval = null
let moleInterval = null

// 音频引用
const hitSound = ref(null)
const startSound = ref(null)
const endSound = ref(null)

// 播放音效函数
const playSound = (soundRef) => {
  if (soundRef.value) {
    soundRef.value.currentTime = 0 // 重置音频
    soundRef.value.play()
  }
}

const startGame = () => {
  score.value = 0
  timeLeft.value = 30
  isPlaying.value = true
  holes.value = Array(9).fill().map(() => ({ isUp: false }))
  
  // 播放开始游戏音效
  playSound(startSound)
  
  gameInterval = setInterval(() => {
    timeLeft.value--
    if (timeLeft.value <= 0) {
      endGame()
    }
  }, 1000)

  moleInterval = setInterval(() => {
    const randomHole = Math.floor(Math.random() * 9)
    holes.value[randomHole].isUp = true
    setTimeout(() => {
      holes.value[randomHole].isUp = false
    }, 1000)
  }, 800)
}

const whack = (index) => {
  if (holes.value[index].isUp) {
    score.value += 10
    holes.value[index].isUp = false
    
    // 播放命中音效
    playSound(hitSound)
  }
}

const endGame = () => {
  isPlaying.value = false
  clearInterval(gameInterval)
  clearInterval(moleInterval)
  
  // 播放游戏结束音效
  playSound(endSound)
  
  setTimeout(() => {
    alert(`游戏结束！你的得分是: ${score.value}`)
  }, 500) // 等待音效播放一小段时间后显示结果
}

onUnmounted(() => {
  clearInterval(gameInterval)
  clearInterval(moleInterval)
})
</script>

<style scoped>
.game-container {
  background-color: #8B4513;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.game-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  color: white;
  font-size: 1.2em;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.hole {
  width: 100px;
  height: 100px;
  background-color: #654321;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.mole {
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  transition: bottom 0.1s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mole.up {
  bottom: 10px;
}

.mole-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.start-button {
  width: 100%;
  padding: 10px;
  font-size: 1.2em;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.start-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.start-button:hover:not(:disabled) {
  background-color: #45a049;
}

/* 隐藏音频元素 */
audio {
  display: none;
}
</style> 